<template>
  <div class="action-btn-width">
    <slot></slot>
    <template v-for="(item, index) in modelValue" :key="index">
      <template v-if="isTrue(item.display)">
        <uc-button :size="item.small" :type="item.type || 'primary'" link
          >{{ item.name }}
        </uc-button>
        <el-divider
          v-if="modelValue.length - 1 != index"
          direction="vertical"
        ></el-divider>
      </template>
    </template>
  </div>
</template>

<script setup>
import { isTrue } from "../../lib";
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
</script>

<style scoped lang="scss">
.action-btn-width {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
</style>
